<template>
    <div id="depositsHistory">
        <div class="u-main">
          <div class="u-tab-wrap">
            <ul class="u-tab clearfix">
              <li val="invest_loan_box" :class="{current:(model==1)}"><a href="javascript:void(0)" @click="changeModel(1)">信用标投资记录</a></li>
              <li val="invest_loan_tendering_box" :class="{current:(model==2)}"><a href="javascript:void(0)" @click="changeModel(2)">抵押标投资记录</a></li>
              <li val="invest_loan_waiting_box" :class="{current:(model==3)}"><a href="javascript:void(0)" @click="changeModel(3)">债务标投资记录</a></li>
              <li val="invest_loan_waiting_box" :class="{current:(model==4)}"><a href="javascript:void(0)" @click="changeModel(4)">飞鸽标投资记录</a></li></ul>
            <!-- /.u-tab -->
          </div>
          <div id="tab-box">
            <div id="repay_list_box" class="u-form-wrap" v-show="model==1" style="padding: 15px;">
              <div style="margin-bottom: 20px;">
                <el-table
                  :data="mydeposits.list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="depositsDate"
                    label="投资时间"
                    width="180">
                    <template slot-scope="scope">
                      <p>{{scope.row.depositsDate | timefilters }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="depositsName"
                    label="投资项目"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="depositsMoney"
                    label="投资金额">
                  </el-table-column>
                  <el-table-column
                    prop="depositsGetMoney"
                    label="收益情况">
                  </el-table-column>
                  <el-table-column
                    prop="depositsStatus"
                    label="项目状态">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <!--分页-->
                <<div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="mydeposits.total">
                </el-pagination>
              </div>
              </div>
            </div>


            <div id="repay_ok_box" class="u-form-wrap" v-show="model==2" style="padding: 15px; width: 750px">
              <el-table
                :data="mydeposits.list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="depositsDate"
                  label="投资时间"
                  width="180">
                  <template slot-scope="scope">
                    <p>{{scope.row.depositsDate | timefilters }}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="depositsName"
                  label="投资项目"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="depositsMoney"
                  label="投资金额">
                </el-table-column>
                <el-table-column
                  prop="depositsGetMoney"
                  label="收益情况">
                </el-table-column>
                <el-table-column
                  prop="depositsStatus"
                  label="项目状态">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!--分页-->
              <<div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="mydeposits.total">
              </el-pagination>
            </div>

              <div class="page-wrap"></div>
            </div>

            <div  class="u-form-wrap" v-show="model==3" style="padding: 15px; width: 750px">
              <el-table
                :data="mydeposits.list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="depositsDate"
                  label="投资时间"
                  width="180">
                  <template slot-scope="scope">
                    <p>{{scope.row.depositsDate | timefilters }}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="depositsName"
                  label="投资项目"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="depositsMoney"
                  label="投资金额">
                </el-table-column>
                <el-table-column
                  prop="depositsGetMoney"
                  label="收益情况">
                </el-table-column>
                <el-table-column
                  prop="depositsStatus"
                  label="项目状态">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!--分页-->
              <<div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="mydeposits.total">
              </el-pagination>
            </div>

              <div class="page-wrap"></div>
            </div>

            <div id="" class="u-form-wrap" v-show="model==4" style="padding: 15px; width: 750px">
              <el-table
                :data="mydeposits.list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="depositsDate"
                  label="投资时间"
                  width="180">
                  <template slot-scope="scope">
                    <p>{{scope.row.depositsDate | timefilters }}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="depositsName"
                  label="投资项目"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="depositsMoney"
                  label="投资金额">
                </el-table-column>
                <el-table-column
                  prop="depositsGetMoney"
                  label="收益情况">
                </el-table-column>
                <el-table-column
                  prop="depositsStatus"
                  label="项目状态">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!--分页-->
              <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="mydeposits.total">
              </el-pagination>
            </div>

              <div class="page-wrap"></div>
            </div>
          </div>
        </div>
    </div>
</template>


<script>
    export default {
      name: "depositsHistory",
      data(){
        return{
          model:1,
          currentPage:1,
          pagesize:4,
          id:1,
          mydeposits:{list:[]},
        }
      },
      created(){
        this.axios.post("/api/depositsHistory/xin",{
          currentPage:this.currentPage,
          pageSize:this.pagesize,
          typeId:this.id,
        }).then((data)=>{
            this.mydeposits=data.data
          })
      },
      methods:{
        handleSizeChange: function (size) {
          this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
        },
        changeModel(i){
          this.model=i
          this.id=i
          this.axios.post("/api/depositsHistory/xin",{
            currentPage:this.currentPage,
            pageSize:this.pagesize,
            typeId:this.id,
          }).then((data)=>{
            this.mydeposits=data.data
          })
        }
      },
      filters: {
        timefilters(val) {
          if (val == null || val == "") {
            return "暂无时间";
          } else {
            let d = new Date(val);   //val 为表格内取到的后台时间
            let month =
              d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
            let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
            let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
            let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
            let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
            let times=d.getFullYear() + '-' + month + '-' + day ;
            return times;
          }
        }
      },
    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';

</style>
